@charset "UTF-8";
@font-face {
  font-family: "NotoMono";
  src: url(../../../static/font/NotoMono-Regular.ttf);
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "OPlusSans";
  src: url(../../../static/font/OPlusSans3-Regular.woff2);
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "HarmonySans";
  src: url(../../../static/font/HarmonyOS_Sans_SC_Regular.woff2);
  font-display: swap;
  font-style: normal;
}

/* ------------ 主体颜色 ------------ */
:root {
  /* ----- 绿色主题 ----- */
  /* 颜色 */
  --color: #42bc7a;
  /* 主题色 */
  --theme-color: var(--color);
  /* 主题色1 */
  --theme-color-1: #def0e4;
  /* 主题色2 */
  --theme-color-2: #addbbc;
  /* 文字 */
  --name-color: #123;
  --bold-color: #456;
  --bold-color: #678;
  --text-color: #789;
  --text-color: #888;
  --text-color-bold: #999;
  /* 边框 */
  --border-color: #abc;
  /* 网页颜色 */
  --body-bg: #f1f2f3;
  --shu-bg: #f3f4f5;
  /* 网页字体 */
  --body-fz: 16px;
  /* 容器背景色 */
  --container-bg: #ffffff;
  /* 容器宽度 */
  --container-width: 794px;
  /* 容器高度 */
  --container-height: 1123px;
  /* 内容宽度 */
  --content-width: 600px;
  /* 头部高度 */
  --head-height: 240px;
  /* 底部*/
  --foot-height: 30px;
  --foot-color: #369;

  --font-bg: #f3f6f9;

  /* 模块 */
  --module-title-fz: 18px;
  /* --title-bg: #d4f2de; */
  --module-title-bg: #dbf0e5;
  --pl: 0px;
  --module-content-gy: 8px;
  --module-content-gx: var(--pl);
  --module-wrap-gy: 6px;

  /* 徽章 */
  --huizhang1: #ff9999;
  --huizhang2: #ffcc99;
  --huizhang3: #99ccff;
  --huizhang4: #99cc66;
  --huizhang5: #66cccc;
  --huizhang6: #ccccff;
  /* ----- 进度条背景 ----- */
  --bar-bg: var(#f3f4f5);
  /* ----- 进度条内容 ----- */
  --bar-bg1: var(--theme-color-1);
  --bar-bg2: var(--theme-color-2);
  --bar-bg3: var(--theme-color);
  /* ----- 进度条内容边框 ----- */
  --bar-border: var(--theme-color);
}

/* ------------ 通用设置 ------------ */
* {
  margin: 0px;
  padding: 0px;
  /* 解决文字变大 */
  max-height: 9999px;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

body {
  background-color: var(--body-bg);
}

body {
  color: var(--text-color);
  background-color: var(--body-bg);
  font-family: "NotoMono", "OPlusSans", "HarmonySans", sans-serif;
  font-size: var(--body-fz);
  line-height: 1.5;
  font-weight: 400;
  /* 设置等宽字体 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  --moz-font-feature-settings: "tnum";
  --webkit-font-feature-settings: "tnum";
}
strong {
  color: var(--text-color-bold);
}
/* ------------ 简历设置 ------------ */
.resume {
  width: var(--container-width);
  /* height: 1122px; */
  margin: 0 auto;
  background-color: var(--container-bg);
  overflow: hidden;
  /* 测试打印灰色 */
  /* filter: grayscale(100); */
}

/* ------------------------ 简历头部 ------------------------ */
.resume-head {
  height: var(--head-height);
  padding-top: 25px;
  text-align: center;
  position: relative;
  z-index: 0;
  /* 一条分割线 */
  border-bottom: 5px solid;
  border-image: linear-gradient(90deg, #fff, #42bc7a, #fff);
  border-image-slice: 1;

  /* 背景字体 */
  .bg-font {
    position: absolute;
    width: 100%;
    color: var(--font-bg);
    font-family: "NotoMono", "OPlusSans", "HarmonySans", sans-serif;
    font-size: 133px;
    letter-spacing: 5px;
    font-weight: 700;
    /* 无法选中 */
    user-select: none;
    top: 0;
    z-index: -1;
  }

  /* 头像包裹*/
  .touxiang {
    --size: 100px;
    --gap: 3px;
    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 10px auto;
    margin-bottom: 10px;
    z-index: 3;
    /* 头像框旋转  */
    &::before {
      position: absolute;
      content: "";
      /* display: block; */
      width: calc(var(--size) + var(--gap) * 2);
      height: calc(var(--size) + var(--gap) * 2);
      border-radius: 50%;
      background-image: linear-gradient(#12c2e9, #c471ed, #f64f59);
      animation: xuanzhuan 3s linear infinite;
      top: calc(0px - var(--gap));
      left: calc(0px - var(--gap));
      z-index: -1;
    }
    /* 头像照片 */
    img {
      border-radius: 50%;
      height: 100%;
      width: 100%;
      /* 不变形 */
      object-fit: cover;
    }
  }

  /* 姓名 */
  h2 {
    color: var(--name-color);
    height: 30px;
    position: relative;
    /* 字体左右间距 */
    letter-spacing: 7px;
    margin-bottom: 5px;
    /* 认证 V 图标 */
    i::after {
      height: 30px;
      line-height: 30px;
      color: #ffb502;
      font-style: normal;
      font-family: "iconfont";
      content: "\e601";
      font-size: 20px;
    }
  }
  /* 求职意向 */
  .qiuzhi {
    margin-bottom: 5px;
  }
  .col-shu {
    display: flex;
    justify-content: center;

    li {
      color: #42bc7a;
      padding: 0 6px 0 2px;

      &::after {
        content: "|";
        color: var(--border-color);
      }

      /* 最后一个没有“|” */
      &:nth-child(5):after {
        content: "";
      }
    }
  }

  /* 徽章 */
  .huizhang {
    /* position: absolute; */
    /* left: 0; */
    /* bottom: 5px; */
    width: 100%;
    user-select: none;
    display: flex;
    justify-content: center;

    li {
      color: #fff;
      font-size: 14px;
      border-radius: 16px;
      /* border: 1px solid #dadada; */
      padding: 2px 10px;
      margin: 0 12px;

      /* 徽章颜色 */
      &:nth-child(1) {
        background-color: var(--huizhang1);
      }

      &:nth-child(2) {
        background-color: var(--huizhang2);
      }

      &:nth-child(3) {
        background-color: var(--huizhang3);
      }

      &:nth-child(4) {
        background-color: var(--huizhang4);
      }

      &:nth-child(5) {
        background-color: var(--huizhang5);
      }

      &:nth-child(6) {
        background-color: var(--huizhang6);
      }
    }
  }
}

/* 旋转动画 */
@keyframes xuanzhuan {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ------------------------ 简历主体-单体布局 start------------------------ */
/* 单体布局 */
.resume-main {
  margin: 0 auto;
  width: 600px;
  padding-top: 20px;
  /* border: #12c2e9 1px solid; */
}

/* 模块  */
.module {
  width: 100%;

  /* 模块标题 */

  .module-title {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color);
    background: var(--module-title-bg);
    border-left: 6px solid var(--theme-color);
    /* 背景长短调节 */
    /* display: inline; */
    padding: 0 24px 0 12px;
  }
  /* 模块内容 */
  .module-content {
    padding: var(--module-content-gy) var(--module-content-gx);
  }

  /* 模块包 */
  .module-wrap {
    margin-bottom: 10px;
  }
}

/* ----- 三列左对齐 ----- */
.col-3 {
  display: flex;
  color: var(--bold-color);
  font-weight: 700;
  /* flex: 1; */
  li {
    flex: 1;
    /* border: 1px solid red; */

    &:nth-child(2) {
      flex: 1.5;
    }

    &:nth-child(3) {
      flex: 1;
    }
  }
}

/* ------------------------ 简历主体-单体布局  end ------------------------ */
/* ------------ 模块自定义 ------------ */
/* 内容编辑 */
.resume-main .gongzuo .item-edit li {
  margin-left: 150px;
  letter-spacing: 0px;
  /* 前置符号 */
  /* list-style: disc; */
}

/* ----- 主要用于项目经验 ----- */
.resume-main .item-edit p {
  /* font-size: 13px; */
  /* 向两侧对齐，最后一行无效 */
  /* text-align: justify; */
  line-height: 1.4;
}

.resume-main .xiangmu .item-edit ul {
  counter-reset: li;
}

.resume-main .xiangmu .item-edit li {
  margin-left: 80px;
  letter-spacing: 0px;
  /* 前置符号 */
  /* list-style: disc; */
}

/* 每个li计数 */
.xiangmu .item-edit li::before {
  counter-increment: li;
  content: counter(li) ".";
}

/* ------------ 二等分 start------------ */
.col-2 {
  display: flex;
  /* border: 1px solid red; */
}

.col-2 ul {
  flex: 1.5;
}

.col-2 ul:last-child {
  flex: 1;
}

/* ------------ 二等分 end------------ */
.zhengshu ul:nth-child(1) li {
  margin-left: 20px;
}

.zhengshu li {
  list-style: circle !important;
}

/* ----- 技能特长 ----- */
.jineng li:before {
  content: "\2022";
  content: "\25cf";
  margin: 20px 5px;
}

.jineng li {
  margin-bottom: 5px;
}
.pingjia li:before {
  content: "\2713";
  margin: 20px 5px;
}

/* ------------------------底部版权 start------------------------ */
.resume-foot {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--foot-color);
  a {
    color: var(--foot-color);
  }
}

/* ------------------------底部版权 start------------------------ */
/* -----------------高亮 */
.jiaoyu .module-wrap:nth-child(1) li:nth-child(2) {
  color: var(--name-color);
}

.gongzuo .module-wrap:nth-child(6) li:nth-child(3) {
  color: var(--name-color);
}

.zhengshu ul:nth-child(1) li:nth-child(3) {
  color: var(--name-color);
}
